<%--
  Created by IntelliJ IDEA.
  tip: lichengming
  Date: 2017/6/14
  Time: 下午4:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>

    <link rel="stylesheet" href="/ems/plugins/kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="/ems/plugins/kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8" src="/ems/plugins/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="/ems/plugins/kindeditor/lang/zh-CN.js"></script>
    <script charset="utf-8" src="/ems/plugins/kindeditor/plugins/code/prettify.js"></script>


    <link rel="stylesheet" type="text/css" href="/ems/plugins/webuploader/webuploader.css">

    <!--引入JS-->
    <script type="text/javascript" src="/ems/plugins/webuploader/webuploader.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新增文章</title>

    <style type="text/css">
        .ems_add_gbtn {
            flex: auto;
            display: flex;
            justify-content: flex-end;
        }

        .ems_add_heading {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 5px 10px;
        }
        .ems_form_reset {
            margin-left: 10px;
        }

        .choose-banners {
            position: relative;
            padding: 25px 15px 15px;
            margin: 15px 0;
            background-color: #fafafa;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
            border-color: #e5e5e5 #eee #eee;
            border-style: solid;
            border-width: 1px 0;
        }
        .uploader-list {
            width: 100%;
            overflow: hidden;
        }

        .uploader-banners .thumbnail {
            /*width: 110px;*/
            /*height: 110px;*/
        }

        .file-item {
            float: left;
            position: relative;
            margin: 0 20px 20px 0;
            padding: 4px;
        }

        .file-item .info {
            position: absolute;
            left: 4px;
            bottom: 4px;
            right: 4px;
            height: 20px;
            line-height: 20px;
            text-indent: 5px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            z-index: 10;
        }
        .file-item .error {
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            background: red;
            color: white;
            text-align: center;
            height: 20px;
            font-size: 14px;
            line-height: 23px;
        }


        .file-item .success {
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            height: 20px;
            line-height: 20px;
            text-indent: 5px;
            background: rgba(63, 117, 4, 0.88);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            z-index: 10;
        }

        .icon-remove {
            position: absolute;
            right: 6px;
            top: 6px;
            cursor: pointer;
            color: white;
            z-index: 10000;
        }

        .ke-container ke-container-default {
            width: 100%;
        }
        .kindeditor-wrap {
            margin-left: 10px;
            margin-right: 10px;
        }
        .notice {
            font-size: 14px;
            color: #a59d9f;
        }
        .search_result img {
            height: 72px;
            width: 72px;
            border-radius: 72px;
        }
        .search_user_info {
            text-align: center;
            float: left;
            padding: 10px;
            cursor: pointer;
        }
        .search_user_info_select {
            background-color: rgba(244, 239, 138, 0.4);
        }
        .search_user_info p {
            margin-top: 5px;
            margin-bottom: 0;
        }
        .share_edit_img {
            height: 100%;
        }

        .ems_edit_content {
            width: 100%;
        }

    </style>
</head>
<body>

<div class="ems_form">
    <div class="panel panel-default">
        <div class="panel-heading ems_add_heading">
            <h3 class="panel-title" style="color: inherit;">新增文章</h3>

            <div class="ems_add_gbtn">
                <button type="button" class="btn btn-primary ems_form_submit">
                    <span class="glyphicon glyphicon-check"></span> 保存
                </button>
                <button type="button" class="btn btn-default ems_form_reset">
                    <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                </button>
            </div>
        </div>

        <div style="margin-left: 10px;margin-right: 10px;">
            <div class="ems_edit_content">
                <form class="form-horizontal ems_internal_form">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">标题：</label>
                        <div class="col-sm-9">
                            <input type="text" name="title" value="${record.title}" class="form-control" placeholder="必填，长度不超过64" required maxlength="64">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">缩略图：</label>
                        <div class="col-sm-7">
                            <!--dom结构部分-->
                            <div class="uploader-banners" class="choose-banners">
                                <!--用来存放item-->
                                <div id="iconList" class="uploader-list">
                                    <c:if test="${not empty record.id}">
                                        <div id="WU_FILE_0" class="file-item thumbnail">
                                            <img class="share_edit_img" src="${record.image}" style="height: 100px;">
                                            <span class="icon-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>
                                        </div>
                                    </c:if>
                                </div>
                                <div id="iconPicker" class="webuploader-container">选择图片</div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
        <div class="kindeditor-wrap">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            文章内容
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <textarea id="content" name="content" cols="200" rows="50">${record.content}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {

        //表单验证
        $(".ems_internal_form").validate();

        $(".ems_form_submit").on("click",function () {
            var form = $(this).parents(".ems_form").find("form:first");
            form.submit();
        });

        $(".ems_form_reset").on("click",function () {
            $form = $(this).parents(".ems_form").find("form:first")[0];
            $form.reset();
        })


        $(".icon-remove").on("click",function () {
            removeShareImage($(this));
        })

        if ("${record.id}") {
            icon = "${record.image}";
        }
    })
</script>

<script>

    var icon = "";
    function removeShareImage($target) {
        $target.parent().remove();
        icon = "";
    }
    jQuery(function() {
        var $ = jQuery,
            $list = $('#iconList'),
            ratio = window.devicePixelRatio || 1,
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            uploader;

        uploader = WebUploader.create({

            auto: true,
            fileNumLimit:1,
            swf: '/ems/plugins/webuploader/Uploader.swf',
            server: '/ems/upload/fupload',
            pick: '#iconPicker',
            accept: {
                title: 'Images',
                extensions: 'jpg,jpeg,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
        });

        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail" style="width: 110px;height: 110px;">' +
                    '<img >' +
                    '<div class="info">' + file.name + '</div>' +
                    '<span class="icon-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>' +
                    '</div>'
                ),
                $img = $li.find('img');

            $list.append( $li );
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>无法生成缩略图</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );

            $(".icon-remove").on("click",function () {
                removeShareImage($(this))
            })
        });


        uploader.on( 'uploadSuccess', function(file,resp) {
            $( '#'+file.id ).addClass('upload-state-done');
            var $li = $( '#'+file.id ),
                $succeed = $li.find('div.success');

            if ( !$succeed.length ) {
                $succeed = $('<div class="success">上传成功</div>').appendTo( $li );
            }
            icon = resp.url;
        });

        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });
    });
</script>

<script type="text/javascript">

    var editor = null;
    $.validator.setDefaults({
        //认证成功
        submitHandler: function(form) {

            editor.sync();
            if ($("#activity_content").val() =='') {
                $.errorAlert("文章内容不能为空");
                return false;
            }
            var data = {};
            $(".ems_form").find("input,textarea").each(function(index,value) {
                data[$(value).attr("name")] = $(value).val();
            });
            data["id"] = '${record.id}';

            var $list = $('#iconList');
            var list = $list.find("div.file-item");
            if(list.length == 0){
                $.errorAlert("请先上传logo图标");
                return;
            }

            data["image"] = icon;
            $.emsAjax({
                url:"/ems/trend/save",
                data:data,
                success:function(response) {
                    if (response.status == "000") {
                        $.toast("保存成功",function () {
                            window.location.href = "/ems/trend/index";
                        });
                    }else {
                        $.toast("保存失败","cancel");
                    }
                }
            });
        }
    });

    KindEditor.ready(function(K) {
        editor = K.create('#content',{
            width:"100%",
            height:"400px",
            urlType:"domain",
            uploadJson : '/ems/upload/fupload'
        });
        prettyPrint();
    });
</script>
</body>
</html>